<script>
import { ArrowRight } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import axios from '@/http'
export default {
  name: "Emp",
  computed: {
    ArrowRight() {
      return ArrowRight
    }
  },
  data(){
    return {
      empList: [],//列表数据
      pageNum: 0,//当前页码
      pages: 0,//总页码
      pageSize: 10, //每页显示的数据量
      total: 0,//总数量
      emp: {} //员工对象
    }
  },
  methods:{
    getEmpList(){
      axios.get('/api/emp/list',{
        params:{
          pageNum:this.pageNum,
          empId: this.emp.empId,
          empName: this.emp.empName,
          account: this.emp.account,
          address: this.emp.address,
          gender: this.emp.gender,
          phone: this.emp.phone

        }
      }).then(resp=>{
        console.log(resp)
        if(resp.code===20000) {
          ElMessage({
            message: '查询员工列表成功',
            type: 'success'
          })
          this.empList = resp.data.pageDataList
          this.pageNum = resp.data.pageNum
          this.pages = resp.data.pages
          this.total = resp.data.total
          this.pageSize = resp.data.pageSize
        } else if(resp.code===70003){
          this.empList = null
          this.pageNum =0//当前页码
          this.pages=0//总页码
          this.pageSize=10 //每页显示的数据量
          this.total= 0//总数量
        }else{
          ElMessage({
            message: '查询员工列表失败',
            type: 'error'
          })
        }
      }).catch(error=>{
        consoel.log(error)
      })
    }
  },
  mounted(){
    this.getEmpList()
  }
}
</script>

<template>
  <div class="emp-container">
    <div class="bread-zone">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item >系统</el-breadcrumb-item>
        <el-breadcrumb-item>员工管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form-zone">
      <el-form :model="emp"  inline >
        <el-form-item label="员工编号">
          <el-input v-model="emp.empId"  style="width:180px;"/>
        </el-form-item>
        <el-form-item label="员工姓名">
          <el-input v-model="emp.empName" style="width:180px;" />
        </el-form-item>
        <el-form-item label="员工账号">
          <el-input v-model="emp.account" style="width:180px;"/>
        </el-form-item>
        <el-form-item label="居住地址">
          <el-input v-model="emp.address" style="width:320px;" />
        </el-form-item>
        <el-form-item label="员工性别">
          <el-select
              placeholder=""
              style="width: 180px"
              v-model="emp.gender"
          >
            <el-option
                :label="'男'"
                :value="1"
            />
            <el-option
                :label="'女'"
                :value="2"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="emp.phone" style="width:180px;"/>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-select
              placeholder=""
              style="width: 180px"
          >
            <el-option
                label="总裁办"
                value="0"
            />
            <el-option
                label="技术部"
                value="1"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="员工状态">
          <el-space :size="10">
            <el-select
                placeholder=""
                style="width: 180px"
            >
              <el-option
                  label="使用期"
                  value="0"
              />
              <el-option
                  label="在职"
                  value="1"
              />
            </el-select>
            <el-button type="primary" @click="getEmpList">查询</el-button>
            <el-button >重置</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div class="emp-btns">
        <el-button type="primary" icon="Plus">新增</el-button>
        <el-button type="primary" plain icon="Edit">编辑</el-button>
        <el-button type="primary" plain icon="Download">导入</el-button>
        <el-button type="primary" plain icon="Upload">导出</el-button>
        <el-button type="success" plain icon="Unlock">启用</el-button>
        <el-button type="danger" plain icon="Remove">禁用</el-button>
        <el-button type="danger" plain icon="Delete">删除</el-button>
      </div>
      <div class="data-zone">
        <el-table
            style="width: 100%"
            :data="empList"
            stripe
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{textAlign:'center'}"
        >
          <el-table-column type="selection" width="60" />
          <el-table-column label="序号" type="index" width="60"/>
          <el-table-column property="empId" label="员工编号" width="120" />
          <el-table-column property="empName" label="姓名" />
          <el-table-column property="account" label="账号" />
          <el-table-column property="deptName" label="所属部门" />
          <el-table-column property="empPost" label="职务" />
          <el-table-column property="gender" label="性别" />
          <el-table-column property="phone" width="120" label="联系电话" />
          <el-table-column property="address" label="居住地址" />
          <el-table-column property="statusName" label="状态" />
          <el-table-column label="操作" width="160" >
            <template #default="scope">
             <el-space :size="5">
               <el-button type="primary" link>查看</el-button>
               <el-button type="primary" link>编辑</el-button>
               <el-button type="danger" link>禁用</el-button>
               <el-button type="danger" link>删除</el-button>
             </el-space>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-zone">
          <el-pagination
              v-model:current-page="pageNum"
              v-model:page-size="pageSize"
              background
              layout="prev, pager, next, jumper"
              :total="total"
              @change="getEmpList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

.bread-zone{
  padding-left:5px;
}
.form-zone{
  border:1px solid #CCC;
  margin-top:20px;
  padding:15px 0 0 10px;
  border-radius: 5px;
}
/*按钮组*/
.emp-btns{
  margin-top:20px;
}
/*数据列表*/
.data-zone{
  margin-top:20px;
}
/*分页*/
.page-zone{
  margin:20px 0 0 10px;
}
</style>